/* -------------------- Attach dedicated CSS for various viewports --------------------- */
@import url('/css/css_Sanitize.css?ver=1871');              /* Imports all fonts for the project */
@import url('/css/css_Fonts.css?ver=1871');                 /* Imports all fonts for the project */
@import url('/css/css_Sizer_300.css?ver=1526');             /* Defines the sizes for screen ports < 300 */
@import url('/css/css_Sizer_420.css?ver=2561');             /* Defines the sizes for screen ports >300 < 420 */
@import url('/css/css_Sizer_790.css?ver=1511');             /* Defines the sizes for screen ports >420 < 790 */
@import url('/css/css_Sizer_1080.css?ver=1599');            /* Defines the sizes for screen ports >790 < 1080 */
@import url('/css/css_Sizer_1100.css?ver=1523');            /* Defines the sizes for screen ports >1100 */
@import url('/css/css_Effects.css?ver=1007');               /* Imports all effects for the project */
@import url('/css/css_Boxes.css?ver=1122');                 /* Imports the design for the Div tags */
@import url('/css/css_Forms.css?ver=1819');                 /* Imports the design for Form tags */
@import url('/css/css_Objects.css?ver=1876');               /* Imports object styling */
@import url('/css/css_Payroll.css');                        /* Imports css for Payroll Module */
@import url('/css/css_IMSG.css');                           /* Imports css for IMSG Module */

html {
}

body {
    background-color: ghostwhite;
    font-family: Montserrat;
    font-weight: bold;
}

.body-Panel {
    background-color: ghostwhite;
    margin:3vw
}

.A4_page {
    width: 29.7cm;
    max-height: 24cm;
    padding: 2cm;
    margin: 1cm auto;
    border: 1px Ghostwhite solid;
    border-radius: 5px;
    background: white;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

.A4_subpage {
    padding: 1cm;
    border: 5px aqua solid;
    height: 198mm;
    outline: 2cm #FFEAEA solid;
}


.print_container {
    background-position-x: 0vw;
    background-repeat: no-repeat;
    background-image: url(https://axxpoint.imostate.gov.ng/images/IMSG_DMC_Salary_Statement_Template.svg?mode=1);
    background-size: cover;
    width: 11.7in;
    height: 8.3in;
}


div {
    background-color: ghostwhite;
}

.text_padding {
}

.container_padding {
}

.scroll {
    
}

.gridrow:nth-child(odd) {
    background-color: lavender;
    align-items: center;
}

.gridrow:nth-child(even) {
    background-color: white;
    align-items: center;
}

.label {
    position: absolute;
}


.fa-good {
    color: green
}

.fa-bad {
    color: red
}

.th_text {
    background: green;
    color: white;
    margin: auto;
    padding: 0.05in;
    align-content: center;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 14px;
    text-transform: uppercase;
    text-align: center;
    font-family: 'Century Gothic'
}

.td_text {
    background: white;
    color: black;
    margin: auto;
    padding: 0.01in;
    align-content: center;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 12px;
    text-transform: uppercase;
    text-align: center;
    font-family: 'Century Gothic'
}

.place_Div {
    text-align: center;
    display: block
}

img {
    vertical-align: middle;
}

.style_Link {
    font-family: Montserrat;
    font-weight: bold
}

.qck_Links {
    font-family: Montserrat;
    font-weight: bold
}

a {
    
}

.my_Watermark {
    opacity: 0.05;
    position: fixed;
    transform: translate(-50%, -55%);
}

.grid-container {
    display: grid;
    grid-template-columns: 0.2fr 0.8fr;
}

.float-container {
    
}

.float-child {
    
}


/* Slideshow container */
.slideshow-container {
    position: relative;
    margin: auto;
}

/* Caption text */
.text {
    color: #f2f2f2;
    position: absolute;
    text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
    color: #f2f2f2;
    position: absolute;
}

/* The dots/bullets/indicators */
.dot {
    background-color: #bbb;
    display: inline-block;
    transition: background-color 0.6s ease;
}

.input, .btn {
    font-size: 1.52vh;
    min-height: 3.17vh;
    max-height: 4.44vh;
    padding: 0.25vh 0.64vh;
    border-radius: 0.64vh 0.64vh 0.64vh 0.64vh;
    margin: 0.25vh;
}

input[type=button], input[type=submit], input[type=reset] {
    
}

input[type=text], input[type=password] {
    
}

/* Box Wrapper - Div or Panel*/
.wrapper {
    
}

.closebtn {
    margin-left: 15px;
}

/* Style Button*/
.style_Btn {
    border: none;
    padding: 0.25vh;
    width: 8vw;
}

.mod_Label {
    margin: 0px auto;
}

/* The alert message box - success */
.failed {
    
}

/* The alert message box - failed */
.success {
    
}

div.container4 {
}

    div.container4 p {
    }

.box_Div {
}

#formContent {
}

#formFooter {
}

.shadow_Box {
}

.circular--portrait {
}

    .circular--portrait img {

    }

.circular--landscape {
    display: inline-block;
    position: relative;
    overflow: hidden;
}

    .circular--landscape img {
        
    }

* {
    box-sizing: border-box;
}

.mySlides {
    display: none;
}



.active {
    background-color: #717171;
}


/* Fading animation */
.fade {
    animation-name: fade;
    animation-duration: 1.5s;
}

@keyframes fade {
    from {
        opacity: .4
    }

    to {
        opacity: 1
    }
}


@media screen {
    .Header_1 {
        display: table;
        position: absolute;
        left: 2.9in;
        top: 1.8in;
        width: 8.5in;
    }

    .Content_1 {
        display: table;
        position: absolute;
        left: 2.9in;
        top: 3.15in;
        width: 9in;
    }
}


@media print {
    .Header_1 {
        display: table;
        position: absolute;
        left: 2.4in;
        top: 1.6in;
        width: 9in;
    }

    .Content_1 {
        display: table;
        position: absolute;
        left: 2.4in;
        top: 2.95in;
        width: 9in;
    }
}